<template>
  <div class="box">
    <navBar :navBar="navBar" :callback="callback"></navBar>
    <div class="content">
      <div class="item" v-for="(item,index) in subscriptionList" :key="index" @click="gobugnewcoin(item)">
        <p class="title">{{item.bi_name}} {{$t('新币申购')}}</p>
        <div class="innerArea">
          <div class="stateBox" style="background: #217dc1;color: #FFFFFF;border-radius: 6px;text-align: center;">{{$t('参加活动')}}</div>
          <p class="text">{{$t('锁仓期限')}}：<span>{{item.day}}{{$t('天')}}</span></p>
        </div>
        <div class="innerArea">
          <p class="numText">{{item.sum_buy}}<span class="innerTxt"></span> / 
		  <span class="rightTxt">{{item.sum}}<span class="innerTxt"></span></span></p>
          <p class="time">{{$t('剩余')}}{{ 100 - item.bili }}%</p>
        </div>
        <van-progress :percentage="item.bili" stroke-width="15px" />
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "subscription",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("新币申购"),
        close: false,
        btn: this.$t("我的申购"),
      },
      subscriptionList: [],
    };
  },

  mounted() {
	  this.init();
  },

  methods: {
	  gobugnewcoin(item){
		  this.$router.push({
		    name: "subscriptionDetail",
		    query: {
		      item: item,
		    },
		  });
	  },
    // 跳转我的申购页面
    callback() {
      this.$router.push("/mySubscription");
    },
	init(){
	  let data = {
	    language: String(this.$i18n.locale).toUpperCase()
	  }
	  var that = this;
	  $postAxios(api.getNewCoinList, data, (res) => {
			 let arr  = res.data;
			arr.forEach(function (val){
				let bili = val.sum_buy/val.sum
				val.bili = bili*100;
				
				that.subscriptionList.push(val);
			})
			
	  });
	},
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f6fb;
  .content {
    padding: 15px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    .item {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .title {
        margin-bottom: 10px;
        color: #303133;
        font-size: 18px;
        font-weight: 400;
        word-break: break-word;
      }
      .innerArea {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .stateBox {
          padding: 7px;
          color: #333;
          font-size: 12px;
          line-height: 1;
          border: 1px solid #edecf2;
          background-color: #edecf2;
        }
        .text {
          color: #303133;
          font-size: 12px;
          span {
            margin-left: 5px;
            color: #ee7625;
          }
        }
        .numText {
          color: #303133;
          font-size: 12px;
          font-weight: 700;
          .innerTxt {
            margin-left: 4px;
          }
          .rightTxt {
            color: grey;
            font-weight: normal;
          }
        }
        .time {
          color: #303133;
          font-size: 12px;
        }
      }
    }
  }
}
</style>